<template>
    <section>
        <!--列表-->
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">订单查询</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true">
                    <el-form-item label="姓名">
                        <el-input v-model="searchObj.name" clearable placeholder="" size='small' style="width: 130px"/>
                    </el-form-item>
                    <el-form-item label="手机号:" class="m-l-30">
                        <el-input v-model="searchObj.mobile" clearable placeholder="" size='small' style="width: 150px"/>
                    </el-form-item>
                    <el-form-item label="身份证号:" class="m-l-30">
                        <el-input v-model="searchObj.idCard" clearable placeholder="" size='small' style="width: 220px"/>
                    </el-form-item>
                    <el-form-item label="用户ID:" class="m-l-30">
                        <el-input v-model="searchObj.userId" clearable placeholder="" size='small' style="width: 150px"/>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                    <el-form-item label="订单状态" class="m-l-30">
                        <el-select v-model="searchObj.status" clearable @change="selectChange" size='small' placeholder="全部" style="width: 130px">
                            <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="searchObj.verifyStatus" clearable @change="selectChange" size='small' placeholder="全部" style="width: 130px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="(value,key) in verifyStatusMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用渠道" class="m-l-30">
                        <el-select v-model="searchObj.appId" size='small' @change="selectChange" clearable placeholder="" style="width: 130px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="item in appData" :key="item.appId" :label="item.appName" :value="item.appId"/>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="起止日期:" class="m-l-30">
                        <el-date-picker v-model="dateValue" type="daterange" @change="dateChange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:400px" size='small'/>
                    </el-form-item> -->
                    <el-form-item label="订单日期:" class="m-l-30">
                        <el-date-picker v-model="dateValueOne" type="date" @change="dateChange" value-format="yyyy-MM-dd" placeholder="选择日期" size='small' style="width:160px"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--列表-->
                <el-table class="table" border :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column prop="orderId" label="订单编号"/>
                    <el-table-column prop="appName" label="渠道"/>
                    <el-table-column prop="mobile" label="手机号"/>
                    <el-table-column prop="trueName" label="姓名"/>
                    <el-table-column prop="idCard" label="身份证号"/>
                    <el-table-column prop="zhifubaoCard" label="支付宝账号"/>
                    <el-table-column prop="userId" label="用户ID"/>
                    <el-table-column prop="createTime" label="下单时间" width="100"/>                    
                    <el-table-column prop="statusInfo" label="订单状态"/>
                    <el-table-column prop="verifyStatusInfo" label="审核状态"/>
                    <el-table-column prop="bonusInfo" label="结算方式"/>
                    <!-- <el-table-column prop="" label="订单金额(元)"/> -->
                    <el-table-column label="截图报备">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="orderImages(scope.row.orderId)" size='mini'>查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="updateStatus(scope.row)" size='mini'>更新</el-button>
                        </template>
                        <!-- <el-button type="primary" size='small'>操作</el-button> -->
                        <!-- <template slot-scope="scope">
                            <router-link target="_blank" :to="{path:`/orderDetails`,query: { orderNo:scope.row.orderNo, userId:scope.row.userId}}">
                                <el-button type="warning" size='mini'>详情</el-button>
                            </router-link>
                        </template> -->
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <el-dialog title="截图报备" :visible.sync="dialogVisible" width="60%" :close-on-click-modal='false' @close="dialogClose">
                    <div v-for="(item,index) in imagesData" :key="index" class="images-box">
                        <img :src="item.image" alt=""/>
                    </div>
                </el-dialog>
                <el-dialog title="修改状态及返佣" :visible.sync="dialogVisible2" width="40%" :close-on-click-modal='false' @close="dialogClose2">
                    <el-form label-width="150px">
                        <el-form-item label="审核状态">
                            <el-select v-model="initVerifyStatus" :disabled="dialogObj.verifyStatus == 3" @change="verifyChange" size='small' placeholder="全部" style="width: 130px">
                                <el-option v-for="(value,key) in verifyStatusMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-select v-model="initStatus" :disabled="initVerifyStatus != 3 || dialogObj.status == 2" size='small' placeholder="全部" style="width: 130px">
                                <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="审核状态">
                            <el-select v-model="dialogObj.verifyStatus" :disabled="dialogObj.verifyStatus == 3" size='small' placeholder="全部" style="width: 130px">
                                <el-option v-for="(value,key) in verifyStatusMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-select v-model="dialogObj.status" :disabled="dialogObj.verifyStatus != 3" size='small' placeholder="全部" style="width: 130px">
                                <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="结算方式">
                            {{dialogObj.bonusInfo}}
                        </el-form-item>
                        <el-form-item label="返佣金额">
                            <el-input type="number" min="1" v-model="dialogObj.rakeback" :disabled="initStatus != 2" placeholder="" size='small' style="width: 130px"/>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="2" v-model="dialogObj.remark" clearable placeholder="" size='small' style="width: 250px"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="updateConfirm" size='small'>更新</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";
// import { PAGE_SIZE } from "@/config";
export default {
    data() {
        return {
            searchObj: {
                status:"1",
                verifyStatus:"",
                appId:"",
            },
            dateValue: [], //
            dateValueOne:"",
            startTime:"",
            endTime:"",

            appData: [],
            tableData: [], //返回数据data
            // 订单状态
            statusMap: {
                1: "审核中",
                2: "审核通过",
                3: "审核拒绝"
            },
            // 审核状态
            verifyStatusMap: {
                0: "未审核",
                1: "待结算",
                2: "审核拒绝",
                3: "已结算"
            },
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数
            listLoading: false,

            productOptions: [], // 应用渠道下拉框列表
            status: [], //状态数组
            startValue: "", // 开始时间
            endValue: "", // 结束时间

            dialogVisible: false,
            imagesData: [],

            dialogVisible2: false,
            dialogObj: {
                verifyStatus: "",
                status: "",
                remark:"",
                rakeback: "",
            },
            initVerifyStatus:'',
            initStatus:'',            
        };
    },
    methods: {
        // 时间change
        dateChange(date) {
            // if (date != null) {
            //     this.startTime = date[0];
            //     this.endTime = date[1];
            // } else {
            //     this.startTime = '';
            //     this.endTime = '';
            // }            
            if (date != null) {
                this.startTime = `${date} 00:00:00`;
                this.endTime = `${date} 23:59:59`;
            } else {
                this.startTime = '';
                this.endTime = '';
            }
        },
        // 查询订单列表
        onSubmit() {            
            this.currentPage = 1;
            // 查询数据接口调用
            this.getDataList();
        },
        selectChange(){
            this.onSubmit();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.orderList({
                ...this.searchObj,
                pageNum: this.currentPage,
                createTimeBegin: this.startTime,
                createTimeEnd: this.endTime 
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.list;
                    // 如果页码大于1000展示1000 小于1000则展示返回的页码
                    if (res.data.pages < 1000) {
                        this.pageCount = res.data.pages;
                    } else {
                        this.pageCount = 1000;
                    }
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询订单列表
            this.getDataList();
        },

        // 查看截图
        orderImages(orderId) {
            api.getOrderImageInfo({
                orderId: orderId
            }).then(res => {
                this.imagesData = res.data;
                if (!res.data.length) {
                    this.$message.error("暂无截图！");
                } else {
                    this.dialogVisible = true;
                }
            });
        },
        // 审核状态change
        verifyChange(e){
            if (e == 2) {
                this.initStatus = "3"; 
            }else{
                this.initStatus = this.dialogObj.status;
            }
        },
        dialogClose() {
            this.imagesData = "";
        },
        dialogClose2() {
            this.dialogObj = {
                verifyStatus: "",
                status: "",
                remark:"",
                rakeback:""
            };
            this.initVerifyStatus = "";
            this.initStatus = "";
            // this.rakeback = "";
        },
        // 修改订单状态及反佣
        updateStatus(rowData) {
            this.dialogVisible2 = true;
            for (const key in rowData) {
                if (rowData[key] !== null) {
                    this.dialogObj[key] = rowData[key].toString();
                }
            }
            this.initVerifyStatus = rowData.verifyStatus.toString();
            this.initStatus = rowData.status.toString();
        },
        updateConfirm() {            
            if (this.dialogObj.status == 2) {
                this.$message.error("该订单已审核通过,不能修改!");
                return false;                
            }
            if (this.initStatus == 2) {
                if (this.dialogObj.rakeback <= 0 || this.dialogObj.rakeback == "") {
                    this.$message.error("输入金额需大于0!"); 
                    return false;               
                }   
                this.$confirm(`订单审核通过后，订单状态无法修改，系统会自动核算并转入返佣金额，是否更新订单状态？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.updateOrderStatus();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            }else if(this.initVerifyStatus == 3){
                this.$confirm(`请务必核实是否已和机构结算，修改审核状态为已结算后无法修改，是否更新审核状态？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.updateOrderStatus();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            }else{
                this.updateOrderStatus();
            }            
        },
        updateOrderStatus(){
            api.updateOrder({
                userId: this.dialogObj.userId,
                orderId: this.dialogObj.orderId,
                rakeback: this.dialogObj.rakeback,
                status: this.initStatus,
                verifyStatus: this.initVerifyStatus,
                remark: this.dialogObj.remark
            }).then(res => {
                this.$message.success("更新成功!");
                this.dialogVisible2 = false;
                // 查询订单列表
                this.getDataList();
            });
        },
        // 查询产品列表
        getAppList() {
            api.getProductInfoList({
                pageSize: 1000
            }).then(res => {
                this.appData = res.data.list;
            });
        },

        // 暂时无用

        // 开始时间结束时间验证
        checkDate(startTime, endTime) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split("-");
                var endTmp = endTime.split("-");
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);
                if (sd.getTime() > ed.getTime()) {
                    return false;
                }
            }
            return true;
        }
    },
    mounted() {
        this.getAppList();
        // 查询订单列表
        this.getDataList();
    }
};
</script>

<style>
.images-box {
    display: inline;
}
.images-box img {
    width: 200px;
    height: 350px;
    margin-left: 30px;
    /* width: 100px;
    height: 180px; 
    margin-left: 20px;*/
}
</style>
